<template>
	<view>
		<cmd-nav-bar title="我的"></cmd-nav-bar>
		<cmd-page-body type="top">
			<view class="person-head" @click="fnInfoWin">
			  <cmd-avatar :src="userInfo.avatar || '/static/img/logo/logo.png'" size="lg" :make="{'background-color': '#fff'}"></cmd-avatar>
			  <view class="person-head-box">
			    <view class="person-head-nickname">
					{{userInfo.nickName || '游客'}}
				</view>
				<view class="person-head-mobile">
					{{userInfo.mobile || ''}}
				</view>
			  </view>
			</view>
			<view class="person-list">
			  <cmd-cell-item title="我的设备" slot-left arrow>
			    <cmd-icon type="bullet-list" size="24" color="#368dff"></cmd-icon>
			  </cmd-cell-item>
			  <cmd-cell-item title="消息通知" slot-left arrow>
			    <cmd-icon type="message" size="24" color="#368dff"></cmd-icon>
			  </cmd-cell-item>
			  <cmd-cell-item title="系统设置" slot-left arrow>
			    <cmd-icon type="settings" size="24" color="#368dff"></cmd-icon>
			  </cmd-cell-item>
			  <cmd-cell-item title="检查版本" addon="v1.0" slot-left arrow>
			    <cmd-icon type="alert-circle" size="24" color="#368dff"></cmd-icon>
			  </cmd-cell-item>
			</view>
		</cmd-page-body>
		<!-- 底部导航栏 -->
		<tabbar :valueModel="2"></tabbar>
	</view>
</template>
<script>
	import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
	import cmdPageBody from "@/components/cmd-page-body/cmd-page-body.vue"
	import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"
	import cmdIcon from "@/components/cmd-icon/cmd-icon.vue"
	import cmdCellItem from "@/components/cmd-cell-item/cmd-cell-item.vue"
	export default {
		components:{
			 cmdNavBar,
			 cmdPageBody,
			 cmdAvatar,
			 cmdCellItem,
			 cmdIcon
		},
		data() {
			return {
				userInfo: {}
			}
		},
		onShow() {
			this.userInfo = getApp().globalData.userInfo;
		},
		methods: {
			/**
			 * 打开用户信息页
			 */
			fnInfoWin() {
			  uni.navigateTo({
			    url: '/pages/user/info/info'
			  })
			}
		}
	}
</script>

<style>
 .person-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 150px;
    padding-left: 20px;
    background: linear-gradient(to right, #365fff, #36bbff);
  }

  .person-head-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 10px;
  }

  .person-head-nickname {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
  }

  .person-head-mobile {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
  }
  
  .person-list {
    line-height: 0;
  }
</style>
